<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background: #3cb464;
        }
        
        .container {
            position: absolute;
            width: 800px;
            height: 400px;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .container div,
        .container span {
            position: absolute;
        }
        
        .intem {
            width: 200px;
            height: 200px;
            bottom: 70px;
            left: 50%;
            margin-left: -50px;
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
        }
        
        .container .wrap {
            width: 100px;
            height: 100px;
            bottom: 0;
            left: 50%;
            margin-left: -50px;
            box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
            -webkit-animation: qiu 0.6s ease-in-out infinite;
            animation: qiu 0.6s ease-in-out infinite;
        }
        
        .intem .wrap .eye {
            background: #fff;
            border-radius: 50%;
            border-top: 2px solid #111;
        }
        
        .intem .wrap .eye span {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #232323;
        }
        
        .intem .wrap .eye.left {
            top: 30px;
            left: 30px;
            width: 30px;
            height: 29px;
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        
        .intem .wrap .eye.left span {
            top: 12px;
            height: 9px;
            left: 12px;
        }
        
        .intem .wrap .eye.right {
            top: 35px;
            right: 20px;
            width: 20px;
            height: 20px;
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }
        
        .container .wrap .eye.right span {
            top: 9px;
            left: 7px;
        }
        
        .intem .wrap .mouth {
            width: 16px;
            height: 4px;
            bottom: 20px;
            background: #fff;
            border-radius: 60% 80% 50% 100%;
            left: 50px;
        }
        
        .intem .wrap .arm {
            width: 15px;
            height: 16px;
            bottom: 28px;
            border-radius: 7px;
            z-index: -1;
            -webkit-animation: arm 0.7s ease-in-out infinite;
            animation: arm 0.7s ease-in-out infinite;
        }
        
        .intem .wrap .arm.left {
            left: -13px;
            -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
        
        .intem .wrap .arm.right {
            right: -13px;
            -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
        }
        
        .container .shadow {
            width: 70px;
            height: 10px;
            bottom: -10px;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 50%;
            background: #37a45b;
            box-shadow: 0 0 5px #37a45b;
            -webkit-animation: shadow 0.7s ease-in-out infinite;
            animation: shadow 0.7s ease-in-out infinite;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        
        .intem#pink {
            left: 33%;
            z-index: 30;
        }
        
        .intem#pink .wrap {
            background: pink;
        }
        
        .intem#pink .mouth {
            left: 43px;
            -webkit-animation: mounth 0.7s ease-in-out infinite;
            animation: mounth 0.7s ease-in-out infinite;
        }
        
        .intem#pink .arm {
            background: pink;
        }
        
        .intem#green {
            left: 58%;
            z-index: 20;
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        
        .intem#green .wrap {
            background: greenyellow;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }
        
        .intem#green .mouth {
            left: 50px;
            height: 15px;
            width: 40px;
            -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
            -webkit-animation: mounth 0.7s ease-in-out infinite;
            animation: mounth 0.7s ease-in-out infinite;
        }
        
        .intem#green .arm {
            background: greenyellow;
        }
        
        .intem#yellow {
            left: 80%;
            z-index: 20;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
        }
        
        .intem#yellow .wrap {
            background: paleturquoise;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }
        
        .intem#yellow .mouth {
            left: 50px;
            width: 20px;
            height: 5px;
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
            -webkit-animation: mounth 0.7s ease-in-out infinite;
            animation: mounth 0.7s ease-in-out infinite;
        }
        
        .intem#yellow .arm {
            background: paleturquoise;
        }
        
        @keyframes qiu {
            0% {
                bottom: 0;
            }
            20% {
                bottom: 8px;
            }
            40% {
                bottom: 14px;
            }
            60% {
                bottom: 16px;
            }
            80% {
                bottom: 24px;
            }
            100% {
                bottom: 0;
                border-radius: 49% 47% 42% 40%/60% 60% 40% 40%;
            }
        }
        
        @keyframes arm {
            0%,
            100% {
                bottom: 28px;
            }
            33% {
                bottom: 23px;
            }
            40% {
                -webkit-transform: scale(1.2);
                transform: scale(1.2);
            }
            66% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
            }
        }
        
        @keyframes shadow {
            0%,
            100% {
                -webkit-transform: scaleX(1);
                transform: scaleX(1);
            }
            50% {
                -webkit-transform: scaleX(0.8);
                transform: scaleX(0.8);
            }
        }
        
        @keyframes mounth {
            0%,
            100% {
                height: 15px;
                width: 20px;
                border-radius: 50% 66% 50% 50%;
            }
            50% {
                height: 16px;
                bottom: 20px;
                border-radius: 100% 50% 100% 50%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="intem" id="pink">
            <div class="wrap">
                <div class="left eye"><span></span></div>
                <div class="right eye"><span></span></div>
                <div class="mouth"></div>
                <div class="arm left"></div>
                <div class="arm right"></div>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="intem" id="green">
            <div class="wrap">
                <div class="left eye"><span></span></div>
                <div class="right eye"><span></span></div>
                <div class="mouth"></div>
                <div class="arm left"></div>
                <div class="arm right"></div>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="intem" id="yellow">
            <div class="wrap">
                <div class="left eye"><span></span></div>
                <div class="right eye"><span></span></div>
                <div class="mouth"></div>
                <div class="arm left"></div>
                <div class="arm right"></div>
            </div>
            <div class="shadow"></div>
        </div>
    </div>
</body>

</html>